<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引用vue3的源码 -->
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div class="app"></div>
    
</body>
<script>
    // <!-- 生命周期函数： -->
// <!-- 在 某一时刻 会 自动执行 的函数 -->
    const app = Vue.createApp({
        data(){
            return{
                message:'jspang.com'
            }
        },
        methods: {
            //这是个对象，可以包含很多方法
            clickItem(){
                this.message = this.message == 'jspang.com'?'技术胖':'jspang.com'
            }
        },
        beforeCreate() {
            // 在实例生成之前会自动执行
            console.log('beforeCreate')
        },
        created() {
            // 在实例生成之后会自动执行
            console.log('created')
        },
        beforeMount() {
            //在模板渲染完成之前执行
            console.log('beforeMount')
        },
        mounted() {
            //在模板渲染完成之后执行
            console.log('mounted')
        },
        beforeUpdate() {
            //在data数据发生变化之前执行
            console.log('beforeUpdate')
            console.log(document.querySelector('.app').innerHTML)
        },
        updated() {
            //在data数据发生变化之后执行
            console.log('updated')
            console.log(document.querySelector('.app').innerHTML)
        },
        beforeUnmount() {
            //取消挂载（卸载）之前执行
            console.log('beforeUnmount')
            console.log(document.querySelector('.app').innerHTML)
        },
        unmounted() {
            //取消挂载（卸载）之后执行
            console.log('unmounted')
            console.log(document.querySelector('.app').innerHTML)
        },
        //              给h2添加点击事件-这就是手动触发事件
        template:`<h2 v-on:click='clickItem'>{{
            message
        }}</h2>`
    })
    app.mount('.app')
</script>
</html>